<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/6/2
  Time: 21:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%@include file="/comm/head.jsp"%>
    <%@page isELIgnored="true" %>
</head>
<body>
<div id="app">
    <Card slot="content">
        <i-table ref="tables"  border :columns="columns" :data="data">
            <template slot="selectRow" slot-scope="props">
                <Select
                        filterable
                        remote
                        :remote-method="remoteMethod"
                        :value="props.row.approval" >
                    <Option v-for="item in approvalList" :value="item">{{ item }}</Option>
                </Select>
            </template>
        </i-table>
    </Card>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data () {
            return {
                list: [],
                approvalList:['aa', 'bb'],
                query:'',
                index:-1,
                columns: [
                    {title: '服务器名', key: 'hostname', sortable: true},
                    {title: 'IP', key: 'ip', sortable: true},
                    {
                        title: '审批人',
                        key: 'approval',
                        render: (h, params) => {
                            if (params.row.$isEdit) {
                                return h('div',
                                    this.$refs.tables.$scopedSlots.selectRow({
                                        row: params.row,
                                        index: params.index
                                    })
                                )
                            } else  {
                                return h('div', params.row.approval);
                            }
                        }
                    },
                    {title: '管理人', key: 'administrator'},
                    {title: '部门主管', key: 'leader'},
                    {
                        title: '操作',
                        key: 'operate',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            if (params.row.$isEdit) {
                                                this.handleSave(params.row, params.index)
                                            } else {
                                                this.handleEdit(params.row, params.index)
                                            }
                                        }
                                    }
                                }, params.row.$isEdit ? '保存' : '审批人编辑'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.accountManage(params.index)
                                        }
                                    }
                                }, '账号管理'),
                            ])
                        }
                    }
                ],
                data: [
                    {
                        hostname: 'num01',
                        ip: '18.22.33.44',
                        status: '已有密码',
                        approval: '张一',
                        administrator: '张二',
                        leader: '张三'
                    }, {
                        hostname: 'num02',
                        ip: '28.22.33.44',
                        status: '已有密码',
                        approval: '李一',
                        administrator: '李二',
                        leader: '李三'
                    }, {
                        hostname: 'num03',
                        ip: '38.22.33.44',
                        status: '已有密码',
                        approval: '王一',
                        administrator: '王二',
                        leader: '王三'
                    }
                ]
            }
        },
        methods: {
            handleEdit (row, index) {
                if(this.index == -1 || index === this.index){
                    this.index = index
                    this.$set(row, '$isEdit', true)
                }else{
                    this.$Message.error("您还有未保存的审批人")
                }
            },
            handleSave (row, index) {
                this.index = -1
                this.$set(row, '$isEdit', false)
                this.data[index].approval = this.query
                // console.log(this.data[index].approval);
                // console.log(this.data[index].ip);
            },
            // 数据更改时查询
            remoteMethod2 (query) {
                console.log(query);
                this.query = query
                // getServerManageApprovalList(query).then(res => {
                //   this.approvalList = res.data.approval_list
                // })
            },
        }
    })
</script>

</body>
</html>
